import React from 'react';
import { observer, inject } from 'mobx-react';
import {WeaInputSearch, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const variables = () => {
	return [
		{ name: getLabel('381923','应用名称') , value: 'appname' },
		{ name: getLabel('25301','填写人') , value: 'curruser' },
		{ name: getLabel('523158','填写人部门') , value: 'currdept' },
		{ name: getLabel('527294','填写人分部') , value: 'currsubcompany' },
		{ name: getLabel('527295','填写人岗位'), value: 'currjobtitle' },
		{ name: getLabel('527296','填写日期(yyyy-MM-dd)'), value: 'currdate' },
		{ name: getLabel('527297','填写时间(HH:mm:ss)') , value: 'currtime' },
		{ name: getLabel('527298','填写日期-年(如:2020)'), value: 'curryear' },
		{ name: getLabel('527299','填写日期-月(如:5)'), value: 'currmon' },
		{ name: getLabel('527300','填写日期-日(如:20)'), value: 'currday' },
		{ name: getLabel('527301','填写日期-周(如:星期三)') , value: 'currweek' },
		{ name: getLabel('527302','填写日期-在本月的第几周(如:2)') , value: 'currweekmon' },
		{ name: getLabel('527303','填写日期-在本年的第几周(如:11)') , value: 'currweekyear' },
		{ name: getLabel('527304','显示补交(补交的情况下会显示(补交))') , value: 'makeup' },
	]
};

@observer
@inject('edcFormReplyStore')
export default class PopoverCont extends React.Component {
	search = React.createRef();

	constructor(props) {
		super(props);

		this.store = props.edcFormReplyStore;

		this.state = {
			filterVal: '',
		};
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.visible !== this.props.visible && nextProps.visible) {
			this.setState({ filterVal: '' }, () => {
        document.querySelector('.wea-edc-reply-search input').focus();
      });
		}
	}

	componentDidMount() {
		document.querySelector('.wea-edc-reply-search input').focus();
	}

  	render() {
		const { coms } = this.store;
		const { insert } = this.props;
		const { filterVal } = this.state;

		return (
			<React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@nx1gjf`}>
				<li>
					<WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@ci3u6e`}
  className="wea-edc-reply-search"
  ref={this.search}
  placeholder="Search"
  onSearch={val => this.setState({ filterVal: val })}
  value={filterVal}
					/>
				</li>
				<div className="wea-edc-filed-title">
				{
					coms.filter(com => (com.title || com.config.title)).filter(com => !!~(com.title || com.config.title).indexOf(filterVal)).map((com) => {
						if (com.type !== 'DATATABLE') {
							return <li onClick={() => insert(`{${com.uuid}}`)}>{com.title || com.config.title}<span>[{getLabel('261','字段') }]</span></li>;
						}
					})
				}
				{
					variables().filter(variable => !!~variable.name.indexOf(filterVal)).map(variable => <li onClick={() => insert(`{${variable.value}}`)}>{variable.name}</li>)
				}
				</div>
			</React.Fragment>
		);
  	}
}
